<template>
  <el-dialog width="840px" class="media-image-selector" custom-class="compact-modal" top="10vh" title="选择图片" :visible.sync="visible">
    <el-row class="mb10">
      <el-col>
        <el-form :inline="true">
          <el-form-item>
            <el-button @click="addNew()">上传图片</el-button>
            <a class="ml20 pointer" @click="gotoAssetsCenter()">前往素材中心</a>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table
      height="341px"
      style="width: 100%"
      class="mb20 ss-material-box"
      ref="dataTable"
      :data="dataList"
      v-loading="dataListLoading"
      @current-change="handleCurrentChange"
      v-el-table-infinite-scroll="loadData"
      :infinite-scroll-distance="20"
    >
      <div slot="empty">
        <el-empty :imageSize="100" description="暂无素材，点击左上角按钮上传吧~" />
      </div>
      <el-table-column width="60px" align="center" header-align="center">
        <template slot-scope="scope">
          <el-radio :label="scope.row" v-model="currentRow" style="margin-left: 10px">{{ "" }}</el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="fileName" min-width="180" label="图片">
        <template slot-scope="scope">
          <div class="cell-picture">
            <el-image :src="scope.row.fileUrl" style="width: 68px; height: 48px" fit="contain" />
            <div class="m-picture">
              <div class="m-picture-title">
                {{ scope.row.fileName }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="fileSize" header-align="center" align="center" width="200" :formatter="fileSizeFormatter" label="大小"></el-table-column>
      <el-table-column prop="createTime" header-align="center" align="center" width="250" label="上传时间"></el-table-column>
    </el-table>
    <div class="footer">
      <div class="fluid-center">
        <el-button @click="visible = false">取消</el-button>
        <el-button style="margin-left: 30px" type="primary" @click="finishHandler()">确认</el-button>
      </div>
    </div>
    <picture-uploader ref="uploader" v-if="uploaderVisible" @refreshDataList="getDataList"></picture-uploader>
  </el-dialog>
</template>

<script>
import PictureUploader from "@/components/FileUpload/Picture";
import { open, formatBytes } from "@/utils";
import router from "@/router";
export default {
  components: {
    PictureUploader,
  },
  data() {
    return {
      visible: false,
      uploaderVisible: false,
      dataList: [],
      current: 1,
      pageSize: 9,
      totalCount: -1,
      dataListLoading: false,
      currentRow: {
        id: undefined,
      },
    };
  },
  methods: {
    init() {
      this.visible = true;
      this.getDataList();
    },
    addNew() {
      this.uploaderVisible = true;
      this.$nextTick(() => {
        this.$refs.uploader.init();
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.current = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.current = val;
      this.getDataList();
    },
    // 单选
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    //格式化
    fileSizeFormatter(row, column, cellValue) {
      return cellValue ? formatBytes(cellValue) : "";
    },
    // 跳转到素材中心
    gotoAssetsCenter() {
      let routeData = router.resolve({ path: "/material/picture" });
      open(routeData.href, "_blank");
    },
    loadData() {
      if (this.pageSize < this.totalCount) {
        this.pageSize += 9;
        this.getDataList();
      }
    },
    async getDataList() {
      this.dataListLoading = true;
      const { code, msg, data } = await this.$http.get("/admin/sys/material/page", {
        params: {
          type: "image",
          current: this.current,
          size: this.pageSize,
        },
      });
      this.dataListLoading = false;
      if (code == 200) {
        this.dataList = data.records.map(i => {
          i.checked = false;
          return i;
        });
        this.totalCount = data.total;
      } else {
        this.$message.error(msg);
      }
    },
    finishHandler() {
      this.$emit("selectFinish", this.currentRow);
      this.visible = false;
    },
  },
};
</script>
<style lang="scss">
.ss-material-box {
  &.el-table {
    th {
      padding: 6px;
    }

    .el-table__body tr:hover > td {
      background: inherit;
    }
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 7px;
    background-color: rgba(0, 0, 0, 0);
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
  }
  ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
</style>
<style lang="scss" scoped>
.cell-picture {
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-wrap: nowrap;
  width: calc(100% - 32px);

  .m-picture {
    margin-left: 15px;
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;

    .m-picture-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
      color: #333;
    }
  }
}
</style>
